<template>
    <div class="index-header">
        <div class="carousel">
            <div class="slides" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
                <div v-for="(slide, index) in slides" :key="index" class="slide">
                    <img :src="slide.image" :alt="slide.alt" />
                </div>
            </div>
            <div class="controls">
                <button @click="prevSlide">
                    < </button>
                        <button @click="nextSlide">
                            >
                        </button>
            </div>
        </div>
    </div>


</template>

<script setup lang="ts">
import { ref, defineExpose } from 'vue';

const currentIndex = ref(0);

const prevSlide = (): void => {
    if (currentIndex.value > 0) {
        currentIndex.value--;
    } else {
        // 如果已经是第一张，切换到最后一张
        currentIndex.value = props.slides.length - 1;
    }
};

const nextSlide = (): void => {
    if (currentIndex.value < props.slides.length - 1) {
        currentIndex.value++;
    } else {
        // 如果已经是最后一张，切换到第一张
        currentIndex.value = 0;
    }
};

defineExpose({
    prevSlide,
    nextSlide,
});

const props = defineProps({
    slides: {
        type: Array as () => Array<{ image: string; alt: string }>,
        required: true,
        default: () => [],
    },
});
</script>

<style scoped>
.carousel {
    position: relative;
    width: 700px;
    overflow: hidden;
    /* margin-left: 200px; */
    z-index: 888;
}

.slides {
    display: flex;
    transition: transform 0.5s ease;
}

.slide {
    flex: 0 0 100%;
}

.slide img {
    width: 700px;
    height: 350px;
    object-fit: cover;
}

.controls {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 150px;
    text-align: center;
    /* 水平居中 */
}

.controls button {
    margin: 0 5px;
    padding: 10px;
    font-size: 18px;
    /* 增大字体大小，提高清晰度 */
    cursor: pointer;
    /* 更改鼠标指针样式，表明可点击 */
    border: none;
    /* 移除边框，使按钮背景更明显 */
    background-color: rgba(0, 0, 0, 0.5);
    /* 给按钮一个背景色，提高对比度 */
    color: white;
    /* 文字颜色设置为白色，提高清晰度 */
    border-radius: 5px;
    /* 添加圆角，使按钮更圆润 */
    outline: none;
    /* 移除点击时的轮廓，避免干扰 */
}

.controls button:hover,
.controls button:focus {
    background-color: rgba(0, 0, 0, 0.7);
    /* 鼠标悬停或聚焦时，背景色加深，提高按钮的清晰度 */
}

/* 添加样式以使按钮居中 */
.controls button:first-child {
    float: left;
}

.controls button:last-child {
    float: right;
}

/* 如果按钮在一行中显示，确保它们之间有足够的空间 */
.controls button+button {
    margin-left: 20px;
    /* 添加间距 */
}
</style>
